PhineX Lab | الخطوة 4

PhineX / أزرار الشراء

4/8

الخطوة ٤

أزرار الشراء التفاعلية

سنضيف عمود "Action" وأزرار شراء لكل لعبة مع تأثيرات Hover جذابة.

المهام

١

أضف <th>Action</th> كعمود ثالث في صف الرؤوس

٢

في كل صف بيانات، أضف <td><button class="buy-btn">Buy Now</button></td>

٣

في CSS، نسّق .buy-btn بـ: background: #2ecc71;، border: none;، padding: 8px 16px;، color: white;

٤

أضف تأثير hover: .buy-btn:hover { background: #27ae60; cursor: pointer; }

💡 class="": الـ class يسمح لك بتطبيق نفس التنسيق على عدة عناصر دفعة واحدة.

1

localhost / index.html

◀ السابق

التالي ▶